import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { PlayListRightWrapper } from './style'
import { getSizeImage } from '@/utils/format-utils'
import { Link } from 'react-router-dom'

interface IProps {
  children?: ReactNode
  info: any
}

const ThemeRightPlaylist: FC<IProps> = (props) => {
  const { coverImgUrl, id, name, nickname } = props.info
  return (
    <PlayListRightWrapper>
      <div className="img">
        <img src={getSizeImage(coverImgUrl, 50)} alt="" />
      </div>
      <Link className="info" to="/discover/playlist" state={{ id }}>
        <div className="text">{name}</div>
        <div className="text">by {nickname}</div>
      </Link>
    </PlayListRightWrapper>
  )
}

export default memo(ThemeRightPlaylist)
